<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    width="600px"
    :close-on-click-modal="false"
    append-to-body
    @open="handleOpen"
    @close="handleClose"
  >
    <basic-form
      label-width="120px"
      ref="BasicForm"
      :columns="addOrEditFormConfig"
      v-model="form"
      :col-span="24"
    ></basic-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { postCompanyManage, putCompanyManage, getCompanyById, getOperateAndChannel } from '@/api/enterprise/index';
import { addOrEditFormConfig } from '@/views/enterprise/list/modal.data';
export default {
  props: {
    isVisible: Boolean,
    title: String,
    currentId: Number,
  },
  data() {
    return {
      addOrEditFormConfig,
      form: {
        id: null,
        newCompanyId: '',
        companyNickName: '',
        cityLabel: '',
        operateId: '',
        leader: '',
        leaderPhone: '',
        companyAdminPhone: '',
      },
    };
  },
  watch: {
    currentId(newVal) {
      console.log('id变化了:', newVal, this.form.id);
      this.form.id = newVal;
    }
  },
  methods: {
    addRequest: postCompanyManage,
    updateRequest: putCompanyManage,
    fetchRequest: getCompanyById,
    // 表单重置
    reset() {
      this.form = {
        id: null,
        newCompanyId: '',
        companyNickName: '',
        cityLabel: '',
        operateId: '',
        leader: '',
        leaderPhone: '',
        companyAdminPhone: '',
      };
      this.$refs.BasicForm.getForm().clearValidate();
    },
    // 取消按钮 + 关闭前处理
    handleClose() {
      this.reset();
      this.$emit('update:isVisible', false);
      this.$emit('close');
    },
    // 完成后触发列表刷新
    handleFinish() {
      this.handleClose();
      this.$emit('dialogCallBack');
    },
    // 查询运营商下拉
    getOperateAndList() {
      getOperateAndChannel().then((res) => {
        this.operator = res.data.operateList;
        this.$refs.BasicForm.setColumns('operateId', [
          {
            options: this.operator.map((item) => ({ label: item.deptName, value: item.deptId })),
          },
        ]);
      });
    },
    // 回写表单数据
    handleFetch(id) {
      this.fetchRequest(id).then((res) => {
        const {
          companyAdminPhone,
          companyNickName,
          cityLabel,
          city,
          operateId,
          leader,
          leaderPhone,
        } = res.data;
        this.form = {
          id,
          companyAdminPhone,
          companyNickName,
          cityLabel,
          citycopy: city,
          operateId,
          leader,
          leaderPhone,
        };
      });
    },
    // 弹窗开启
    handleOpen() {
      this.getOperateAndList();
      this.$nextTick(() => {
        if (this.form.id) {
          this.handleFetch(this.form.id);
          this.$refs.BasicForm.hideColumns('companyAdminPhone');
        } else {
          this.reset();
          this.$refs.BasicForm.visibleColumns('companyAdminPhone');
        }
      });
    },
    // 提交按钮
    submitForm: function () {
      this.$refs.BasicForm.getForm().validate((valid) => {
        if (valid) {
          let saveData = { ...this.form };
          // 日期参数处理
          var city = this.form.citycopy.data;
          var cityLabel = `${this.form.citycopy.formatData.province}/${this.form.citycopy.formatData.city}`;
          saveData.city = city[city.length - 1];
          saveData.cityLabel = cityLabel;
          if (this.form.id) {
            this.updateRequest(saveData).then((response) => {
              this.$modal.msgSuccess('修改成功');
              this.handleFinish();
            });
          } else {
            this.addRequest(saveData).then((response) => {
              this.$modal.msgSuccess('新增成功');
              this.handleFinish();
            });
          }
        }
      });
    },
  },
};
</script>
